<template>
  <div class="cate-wrap">
    <cate-item v-for="item in list" :key="item.id" :item="item"></cate-item>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { getGoodList } from "../../utils/home.js";
import cateItem from "../../components/cateItem.vue";
export default {
  components: {
    cateItem,
  },
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      list: [],
    });
    const id = route.params.id;
    console.log(id);
    getGoodList().then((res) => {
      console.log(res);
      data.list = res.data.filter((item) => item.categoryId == id);
    });
    //请求所有的商品 并且根据分类id进行筛选
    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss">
.cate-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
}
</style>
